﻿<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta charset="utf-8" />
<title>4GDPI 客户感知系统</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- 公共资源文件 -->
<link href="/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="/css/font-awesome.min.css" />
<link rel="stylesheet" href="/css/custom.css" />
<link rel="stylesheet" href="/css/ace.min.css" />
<link rel="stylesheet" href="/css/ace-rtl.min.css" />
<link rel="stylesheet" href="/plugins/jerichotab/css/jquery.jerichotab.css" />
<!-- jquery -->
<script src="/plugins/jquery/jquery-1.8.3.min.js"></script>
<script src="/js/index/ace-extra.min.js"></script>
<script src="/js/index/bootstrap.min.js"></script>
<script src="/js/index/typeahead-bs2.min.js"></script>
<script src="/js/index/ace.min.js"></script>
<script src="/js/index/custom.js"></script>
<!-- common -->
<script src="/common/common.js"></script>
<!-- layer弹出 -->
<script src="/plugins/layer-v1.9.0/layer/layer.js"></script>
<!-- 时间控件 -->
<script src="/plugins/My97DatePicker/WdatePicker.js"></script>
<!-- dataTable -->
<link href="/plugins/datatables/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="/plugins/datatables/jquery.dataTables.js" type="text/javascript"></script>
<!-- echarts -->
<script type="text/javascript" src="/plugins/echarts-2.2.7/build/source/echarts-all.js"></script>
<script type="text/javascript" src="/plugins/jerichotab/jquery.jerichotab.js"></script>

<!-- 下拉 -->
<link href="/plugins/jquery-ui-1.11.4.custom/jquery-ui.css" rel="stylesheet">
<script src="/plugins/jquery-ui-1.11.4.custom/jquery-ui.js"></script>
<link href="/plugins/autocomplete/autocomplete.css" rel="stylesheet">
<script src="/plugins/autocomplete/autocomplete.js"></script>
<!-- ztree -->
<link rel="stylesheet" href="/plugins/jquery-ztree/3.5.12/css/demo.css" type="text/css">
<link rel="stylesheet" href="/plugins/jquery-ztree/3.5.12/css/zTreeStyle/zTreeStyle.min.css" type="text/css">
<script type="text/javascript" src="/plugins/jquery-ztree/3.5.12/js/jquery.ztree.core-3.5.js"></script>
<!-- 业务 -->
	<style type="text/css">
		.btn-success, .btn-success:focus {
			background-color: red!important;
			border-color: red
		}
		.btn-success:hover, .open .btn-success.dropdown-toggle {
			background-color: E20020!important;
			border-color: E20020
		}
 		.btn-success.no-border:hover { 
 			border-color: red 
 		} */
 		.btn-success.no-hover:hover { 
 			background-color: red!important 
 		} */
 		.btn-success.active {
 			background-color: red!important; 
 			border-color: red 
 		} */
 		.btn-success.no-border.active { 
 			background-color: red!important; 
 			border-color: red 
 		} 
 		.btn-success.disabled, .btn-success[disabled], fieldset[disabled] .btn-success, .btn-success.disabled:hover, .btn-success[disabled]:hover, fieldset[disabled] .btn-success:hover, .btn-success.disabled:focus, .btn-success[disabled]:focus, fieldset[disabled] .btn-success:focus, .btn-success.disabled:active, .btn-success[disabled]:active, fieldset[disabled] .btn-success:active, .btn-success.disabled.active, .btn-success[disabled].active, fieldset[disabled] .btn-success.active { */
 			background-color: red!important; 
 			border-color: red 
 		} 
	</style>
</head>
<body>
	<div class="main-container" id="main-container">
		<div class="main-container-inner">
			<div class="main-content" style="margin-left: 0px;">
				<div class="wrap-content">
					<div class="panel panel-default">
						<div class="panel-heading">
							<h3 class="panel-title">TCP性能分析指标</h3>
						</div>
						<div class="panel-body">
							<form id="queryForm">
								<div style="border-bottom: 1px dashed #d6d6d6;">
									<table width="100%">
										<tr>
											<td class="table-left-width">时间粒度：</td>
											<td><label><input type="radio" checked="checked"
													name="timeSize" value="hour"> 小时</label> 
												<!-- 	                                            	<label><input type="radio" name="timeSize" value="day"> 天</label>   -->
												<!-- 	                                         	    <label><input type="radio" name="timeSize" value="week"> 周</label> -->
												<!-- 	                                         	    <label><input type="radio" name="timeSize" value="month"> 月</label> -->
											<td width="20px;">&nbsp;</td>
											<td class="table-left-width"><label><span
													class="red">*</span>开始时间：</label></td>
											<td><input id="beginDate" value="$beginDate"
												type="text" style="height: 28px;"
												class="form-inline-block Wdate"
												onFocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:00:00'})"></td>
											<td class="table-left-width"><label><span
													class="red">*</span>结束时间：</label></td>
											<td><input id="endDate" value="$endDate" type="text"
												style="height: 28px;" class="form-inline-block Wdate"
												onFocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:00:00'})"></td>
										</tr>
										<tr>
									</table>
								</div>
								<div class="col-md-10 col-sm-6 form-auto-table">
									<table class="table-label">
										<tr>
											<td class="table-right-width" colspan="0"><label><span
													class="red">*</span>维度：</label></td>
											<td></td>
											<td><label style="margin-left: 10px;"><input
													type="radio" name="latitude" value="user" data-column="8"
													checked="checked">用户：</label></td>
											<td colspan="5"><input id="user_key" type="text"
												class="form-inline-block" style="width: 100px"><label><span
													class="red">*</span></label></td>
											<td><label style="margin-left: 10px;"><input
													type="radio" name="latitude" value="website"
													data-column="8">域名：</label></td>
											<td colspan="5"><input id="website_key" type="text"
												class="form-inline-block" style="width: 100px"><label><span
													class="red">*</span></label></td>

										</tr>

									</table>
									<div class="clear"></div>
									<div class="form-auto-btn" style="margin-top: 5px;">
										<a href="javascript:getList();" class="btn btn-success" ><i
											class="fa fa-search-plus"></i> 查询</a> <a
											href="javascript:resetQueryForm();" class="btn btn-default"><i
											class="fa fa-refresh"></i> 重置</a>
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>

				<div class="wrap-content" style="width: 99.4%;">
					<div class="panel panel-default">
						<div class="panel-heading">
							<h3 class="panel-title">
								<i class="fa fa-th-large"></i> 结果
							</h3>
						</div>
						<div class="panel-body">
							<div>
								<div class="tabbable">
									<ul class="nav nav-tabs" id="myRobots">
										<li class="active"><a data-toggle="tab" href="#list"
											onclick="showPic()"><i class="fa fa-columns"></i> 列选择</a></li>
<!-- 										<li class=""><a data-toggle="tab" href="#ico" -->
<!-- 											onclick="showPic()"><i class="fa fa-file-image-o"></i> 图表</a></li> -->
<!-- 										<a href="javascript:exportExcel();" -->
<!-- 											class="btn btn-success btn-sm" style="float: right;"><i -->
<!-- 											class="fa fa-sign-out"></i> 导出</a> -->
									</ul>
									<div class="tab-content tab-padding">
										<div id="list" class="tab-pane in active">
											<p>
											<div class="wrap-content" id="con">
												<div style="max-width: 1030px; overflow: auto;"
													class="panel-body">
													<table id="table"
														class="table table-bordered table-striped"
														style="font-size: 12px;">
														<thead>
															<tr>
																<th class="aaa">序号</th>
																<th class="aaa">用户名称</th>
																<!-- 第二版变更开始 -->
																<th class="aaa">网站域名</th>
																<th class="aaa">平均握手时延</th>
																<th class="aaa">平均首包时延</th>
																<th class="aaa">平均下载速度</th>
																<th class="aaa">平均丢包率</th>
															</tr>
														</thead>
														<tbody id='tbodyId'></tbody>
													</table>
												</div>
											</div>
											</p>
										</div>
										<div id="ico">
											<p>
											<div class="wrap-content">
												<!-- 图表 -->
												<div id="pic">
													<div id="psLine" style="height: 500px;"></div>
												</div>
												<div class="clear"></div>
											</div>
											</p>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- /.main-content -->
		</div>
		<!-- /.main-container-inner -->

		<input type="hidden" id="t" value="{{flag }}"> <a href="#"
			id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
			<i class="fa fa-angle-double-up"></i>
		</a>
	</div>
	<!-- /.main-container -->
	<input id="jspType" type="hidden" value="{{jspType}}" />
	<input id="city_code" type="hidden" value="{{city_code}}" />
	<input id="enodeb_id" type="hidden" value="{{enodeb_id}}" />
	<input id="kpi_timeSize" type="hidden" value="{{kpi_timeSize}}" />
	<script
		src="/js/edpi/tcp_metr_perf_analy/tcp_metr_perf_analy.js"></script>
</body>
</html>